import { LayoutEx } from './../../../../scripts/libs/utils/Component/LayoutEx';
import { _decorator, Component, Node, Label, Animation, UIOpacity, log, Widget, Prefab, instantiate, v3 } from 'cc';
import { concat, Subscription, Observable } from 'rxjs';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { nullifySubscription } from '../../../../scripts/libs/rxjs/utils';
import { AnimationPlay } from '../../../../scripts/libs/rxjs/cc3/AnimationPlay';
import { Timer } from '../../../../scripts/libs/rxjs/cc3/CreatorSchedule';
import { lm } from '../../LobbyManager';
import { instantFunc, Log, TransparentPass } from '../../../../scripts/libs/rxjs/cc3/CommonObservable';
import { lobby as _uiconfig } from '../../UIConfig';
import { FrontTipItem } from './FrontTipItem';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('FrontTipPanel')
export class FrontTipPanel extends BasePanel {

    @property(Prefab)
    itemPrefab: Prefab = null;

    @property(Node)
    mainNode: Node = null;

    @property(Node)
    container: Node = null;

    onLoadView() {
        lm.frontTip = this;
    }

    onDestroyView(): void {
        this.clear();
    }

    show(message: string, interval = 2, clear = false) {
        if (clear) this.clear();
        return new Observable(observer => {

            let itemNode = instantiate(this.itemPrefab);
            let item = itemNode.getComponent(FrontTipItem);
            this.container.addChild(itemNode);
            item.message.value = message;
            itemNode.setPosition(0, 0);
            itemNode.active = false;

            let putUpDelay = 0;
            if (this.putUp(item._targetHeight)) {
                putUpDelay = .2;
            }

            concat(
                Timer(putUpDelay, this.node),
                instantFunc(() => { itemNode.active = true; }),
                item.inAnim(),
                Timer(interval, this.node),
                item.outAnim(),
            ).subscribe({
                complete: () => {
                    observer.next(true);
                    observer.complete();
                }
            }).addTo(itemNode);

            return () => {
            }
        });
    }

    // 旧的没消失，又需要显示新的，则把之前的向上推
    putUp(height: number): boolean {
        if (this.container.children.length > 0) {
            for (let i = 0; i < this.container.children.length - 1; i++) {
                let itemNode = this.container.children[i];
                let targetPos = v3(itemNode.position);
                targetPos.y += height + 5;
                TweenToStart(itemNode, .2, { position: targetPos }, { easing: 'expoInOut' }).subscribe().addTo(itemNode);
            }
        }
        return false;
    }

    clear() {
        this.container.destroyAllChildren();
    }

    // 队列形式
    public static Show(message: string, interval: number) {
        this.StartProcess(null, _uiconfig.PanelKey.FrontTipPanel as any).subscribe(Log(log));
    }
}

globalThis.FrontTipPanel = FrontTipPanel;

